<template>
  <el-dialog
    :title="!dataForm.id ? '新增' : '修改'"
    :close-on-click-modal="false"
    :visible.sync="visible"
  >
    <el-form
      :model="dataForm"
      :rules="dataRule"
      ref="dataForm"
      @keyup.enter.native="dataFormSubmit()"
      label-width="80px"
    >
      <el-form-item label="类型" prop="type">
        <el-radio-group v-model="dataForm.type">
          <el-radio
            v-for="(type, index) in dataForm.typeList"
            :label="index"
            :key="index"
          >
            {{ type }}
          </el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item
        :label="dataForm.typeList[dataForm.type] + '名称'"
        prop="name"
      >
        <el-input
          v-model="dataForm.name"
          :placeholder="dataForm.typeList[dataForm.type] + '名称'"
        ></el-input>
      </el-form-item>
      <el-form-item label="上级菜单" prop="parentName">
        <el-popover
          ref="menuListPopover"
          placement="bottom-start"
          trigger="click"
        >
          <el-tree
            :data="menuList"
            :props="menuListTreeProps"
            node-key="id"
            ref="menuListTree"
            @current-change="menuListTreeCurrentChangeHandle"
            :default-expand-all="true"
            :highlight-current="true"
            :expand-on-click-node="false"
          >
          </el-tree>
        </el-popover>
        <el-input
          v-model="dataForm.parentName"
          v-popover:menuListPopover
          :readonly="true"
          placeholder="点击选择上级菜单"
          class="menu-list__input"
        ></el-input>
      </el-form-item>
      <el-form-item label="菜单编码" prop="code">
        <el-input v-model="dataForm.code" placeholder="菜单编码"></el-input>
      </el-form-item>
      <el-form-item v-if="dataForm.type !== 2" label="菜单路由" prop="router">
        <el-input v-model="dataForm.router" placeholder="菜单路由"></el-input>
      </el-form-item>
      <el-form-item
        v-if="dataForm.type !== 2"
        label="组件地址"
        prop="component"
      >
        <el-input
          v-model="dataForm.component"
          placeholder="组件地址"
        ></el-input>
      </el-form-item>
      <el-form-item
        v-if="dataForm.type === 2"
        label="授权标识"
        prop="permission"
      >
        <el-input
          v-model="dataForm.permission"
          placeholder="如: sysInfo:query"
        ></el-input>
      </el-form-item>
      <el-form-item v-if="dataForm.type !== 2" label="打开方式" prop="openType">
        <el-select v-model="dataForm.openType" class="width100">
          <el-option
            v-for="(item, index) in dataForm.openTypeList"
            :key="index"
            :value="index"
            :label="item"
          ></el-option>
        </el-select>
        <!-- <el-input v-model="dataForm.openType" placeholder="打开方式"></el-input> -->
      </el-form-item>
      <el-form-item v-if="dataForm.openType === 2" label="内链地址" prop="link">
        <el-input v-model="dataForm.link" placeholder="内链地址"></el-input>
      </el-form-item>
      <el-form-item label="是否可见" prop="visible">
        <el-radio-group v-model="dataForm.visible">
          <el-radio
            v-for="item in dataForm.visibleList"
            :key="item.value"
            :label="item.value"
          >
            {{ item.label }}
          </el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item v-if="dataForm.type !== 2" label="权重" prop="weight">
        <el-radio-group v-model="dataForm.weight">
          <el-radio
            v-for="item in dataForm.weightList"
            :key="item.value"
            :label="item.value"
          >
            {{ item.label }}
          </el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item v-if="dataForm.type !== 2" label="排序号" prop="sort">
        <el-input-number
          class="width100"
          v-model="dataForm.sort"
          controls-position="right"
          :min="0"
          label="排序号"
        ></el-input-number>
      </el-form-item>
      <el-form-item v-if="dataForm.type !== 2" label="tab显示" prop="isTab">
        <el-radio-group v-model="dataForm.isTab">
          <el-radio
            v-for="item in dataForm.isTabList"
            :key="item.value"
            :label="item.value"
          >
            {{ item.label }}
          </el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item v-if="dataForm.type !== 2" label="菜单图标" prop="icon">
        <el-row>
          <el-col :span="22">
            <el-popover
              ref="iconListPopover"
              placement="bottom-start"
              trigger="click"
              popper-class="mod-menu__icon-popover"
            >
              <div class="mod-menu__icon-inner">
                <div class="mod-menu__icon-list">
                  <el-button
                    v-for="(item, index) in iconList"
                    :key="index"
                    @click="iconActiveHandle(item)"
                    type="primary"
                    :class="{ 'is-active': item === dataForm.icon }"
                  >
                    <icon-svg :name="item"></icon-svg>
                  </el-button>
                </div>
              </div>
            </el-popover>
            <el-input
              v-model="dataForm.icon"
              v-popover:iconListPopover
              :readonly="true"
              placeholder="菜单图标名称"
              class="icon-list__input"
            ></el-input>
          </el-col>
          <el-col :span="2" class="icon-list__tips">
            <el-tooltip placement="top" effect="light">
              <div slot="content">
                全站推荐使用SVG Sprite, 详细请参考:<a
                  href="//github.com/daxiongYang/renren-fast-vue/blob/master/src/icons/index.js"
                  target="_blank"
                  >icons/index.js</a
                >描述
              </div>
              <i class="el-icon-warning"></i>
            </el-tooltip>
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item label="状态" prop="status">
        <el-radio-group v-model="dataForm.status">
          <el-radio
            v-for="item in dataForm.statusList"
            :key="item.value"
            :label="item.value"
          >
            {{ item.label }}
          </el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { treeDataTranslate } from "@/utils";
import { GetMenuByIdApi, GetMenusApi, SaveMenuApi } from "@/api/menu";
import Icon from "@/icons";
export default {
  data() {
    var validateUrl = (rule, value, callback) => {
      if (this.dataForm.type !== 2 && (!/\S/.test(value) || value === null)) {
        callback(new Error("菜单路由不能为空"));
      } else {
        callback();
      }
    };
    return {
      visible: false,
      dataForm: {
        id: 0,
        type: 0,
        typeList: ["目录", "菜单", "按钮"],
        name: "",
        pid: 0,
        parentName: "",
        code: "",
        permission: "",
        router: "",
        component: "",
        openType: 0,
        openTypeList: ["默认", "组件", "内链", "外链"],
        link: "",
        visible: "Y",
        visibleList: [{ label: "是", value: "Y" }, { label: "否", value: "N" }],
        weight: 1,
        weightList: [
          { label: "系统权重", value: 1 },
          { label: "业务权重", value: 2 }
        ],
        sort: 0,
        isTab: 1,
        isTabList: [{ label: "是", value: 1 }, { label: "否", value: 0 }],
        icon: "",
        iconList: [],
        status: 1,
        statusList: [{ label: "正常", value: 1 }, { label: "停用", value: 2 }]
      },
      dataRule: {
        name: [
          { required: true, message: "菜单名称不能为空", trigger: "blur" }
        ],
        code: [
          { required: true, message: "菜单编码不能为空", trigger: "blur" }
        ],
        router: [{ validator: validateUrl, trigger: "blur" }],
        component: [
          { required: true, message: "组件地址不能为空", trigger: "blur" }
        ]
      },
      menuList: [],
      menuListTreeProps: {
        children: "childrens",
        label: "name"
      }
    };
  },
  created() {
    this.iconList = Icon.getNameList();
  },
  methods: {
    init(id, isAdd, menuList) {
      this.menuList = menuList;
      if (id && id != 0) {
        GetMenuByIdApi(id)
          .then(res => {
            if (isAdd) {
              this.dataForm.pid = id;
              this.dataForm.id = null;
              this.dataForm.type = res.data.data.type + 1;
              this.dataForm.name = null;
              this.dataForm.code = null;
              this.dataForm.permission = null;
              this.dataForm.router = null;
              this.dataForm.component = null;
              this.dataForm.openType = 0;
              this.dataForm.link = null;
              this.dataForm.visible = "Y";
              this.dataForm.weight = 1;
              this.dataForm.sort = 0;
              this.dataForm.isTab = 1;
              this.dataForm.icon = null;
              this.dataForm.status = 1;
            } else {
              this.dataForm.id = res.data.data.id;
              this.dataForm.type = res.data.data.type;
              this.dataForm.name = res.data.data.name;
              this.dataForm.pid = res.data.data.pid;
              this.dataForm.code = res.data.data.code;
              this.dataForm.permission = res.data.data.permission;
              this.dataForm.router = res.data.data.router;
              this.dataForm.component = res.data.data.component;
              this.dataForm.openType = res.data.data.openType;
              this.dataForm.link = res.data.data.link;
              this.dataForm.visible = res.data.data.visible;
              this.dataForm.weight = res.data.data.weight;
              this.dataForm.sort = res.data.data.sort;
              this.dataForm.isTab = res.data.data.isTab;
              this.dataForm.icon = res.data.data.icon;
              this.dataForm.status = res.data.data.status;
            }
            this.menuListTreeSetCurrentNode();
          })
          .catch(err => {
            window.console.log(err);
          });
      } else {
        this.dataForm.pid = null;
        this.dataForm.id = null;
        this.dataForm.type = 0;
        this.dataForm.name = null;
        this.dataForm.code = null;
        this.dataForm.permission = null;
        this.dataForm.router = null;
        this.dataForm.component = null;
        this.dataForm.openType = 0;
        this.dataForm.link = null;
        this.dataForm.visible = "Y";
        this.dataForm.weight = 1;
        this.dataForm.sort = 0;
        this.dataForm.isTab = 1;
        this.dataForm.icon = null;
        this.dataForm.status = 1;
      }
      this.visible = true;
      this.$nextTick(() => {
        this.$refs["dataForm"].resetFields();
      });
    },
    // 菜单树选中
    menuListTreeCurrentChangeHandle(data, node) {
      window.console.log(data, node);

      this.dataForm.pid = data.id;
      this.dataForm.pids = data.pids + "[" + data.id + "],";
      this.dataForm.parentName = data.name;
    },
    // 菜单树设置当前选中节点
    menuListTreeSetCurrentNode() {
      this.$refs.menuListTree.setCurrentKey(this.dataForm.pid);
      if (this.dataForm.pid == 0) {
        this.dataForm.parentName = null;
        this.dataForm.pids = "[0],";
      } else {
        this.dataForm.pids =
          (this.$refs.menuListTree.getCurrentNode() || {})["pids"] +
          "[" +
          this.dataForm.pid +
          "],";
        this.dataForm.parentName = (this.$refs.menuListTree.getCurrentNode() ||
          {})["name"];
      }
    },
    // 图标选中
    iconActiveHandle(iconName) {
      this.dataForm.icon = iconName;
    },
    // 表单提交
    dataFormSubmit() {
      this.$refs["dataForm"].validate(valid => {
        if (valid) {
          var param = {};
          if (this.dataForm.id !== 0) {
            param.id = this.dataForm.id;
          }
          param.pid = this.dataForm.pid;
          param.pids = this.dataForm.pids;
          param.type = this.dataForm.type;
          param.name = this.dataForm.name;
          param.code = this.dataForm.code;
          param.visible = this.dataForm.visible;
          param.sort = this.dataForm.sort;
          param.weight = this.dataForm.weight;
          param.status = this.dataForm.status;
          if (this.dataForm.openType === 2) {
            param.link = this.dataForm.link;
          }
          switch (this.dataForm.type) {
            case 0:
            case 1:
              // 目录/菜单
              param.router = this.dataForm.router;
              param.component = this.dataForm.component;
              param.openType = this.dataForm.openType;
              param.isTab = this.dataForm.isTab;
              param.icon = this.dataForm.icon;
              break;
            case 2:
              // 按钮
              param.permission = this.dataForm.permission;
              break;
          }
          SaveMenuApi(param)
            .then(res => {
              this.$message({
                message: "操作成功",
                type: "success",
                duration: 1500,
                onClose: () => {
                  this.visible = false;
                  this.$emit("refreshDataList");
                }
              });
            })
            .catch(err => {
              window.console.log(err);
              // this.$message.error(data.msg);
            });
        }
      });
    }
  }
};
</script>

<style lang="scss">
.mod-menu {
  .menu-list__input,
  .icon-list__input {
    > .el-input__inner {
      cursor: pointer;
    }
  }
  &__icon-popover {
    width: 458px;
    overflow: hidden;
  }
  &__icon-inner {
    width: 478px;
    max-height: 258px;
    overflow-x: hidden;
    overflow-y: auto;
  }
  &__icon-list {
    width: 458px;
    padding: 0;
    margin: -8px 0 0 -8px;
    > .el-button {
      padding: 8px;
      margin: 8px 0 0 8px;
      > span {
        display: inline-block;
        vertical-align: middle;
        width: 18px;
        height: 18px;
        font-size: 18px;
      }
    }
  }
  .icon-list__tips {
    font-size: 18px;
    text-align: center;
    color: #e6a23c;
    cursor: pointer;
  }
}
</style>
